<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云API</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/swiper.css">

    <style>
    body{
      width: 100%;
      height: 100%;
    }
        .header {
            width: 100%;
            height: 2.5rem;
            line-height: 2.5rem;
            /*padding: 0.5rem 0.8rem;*/
            background-color: #40cccc;

        }

        .header_l {
            float: left;
            font-size: 1.2rem;
            margin-left: 3%;
        }

        .header_r {
            margin-right: 3%;;
            width: 4rem;
            height: 2rem;
            line-height: 2rem;
            color: #40cccc;
            border-radius: 1rem;
            background-color: #fff;
            float: right;
            text-align: center;
            font-size: 1rem;
            margin-top: 0.3rem;
            font-weight: bold;
        }

        .ul_log {
            width: 100%;
            height: 2.5rem;
        }

        .ul_log ul {
            width: 85%;
            margin: 0 auto;
            padding: 0.5rem 0.8rem;
        }

        .ul_log ul li {
            width: 30%;
            height: 2.5rem;
            line-height: 2.5rem;
            list-style: none;
            text-decoration: none;
            display: block;
            float: left;
            text-align: center;
            font-size: 1.3rem;
            font-weight: bold;
        }

        .li {
            color: #40cccc;
        }

        .lines_s {
            position: absolute;
            top: 6.3rem;
            left: 28%;
            border-bottom: 0.25rem solid #40cccc;
            width: 1.5rem;
        }

        .banner {
            width: 100%;
            height:12rem;
            margin-top: 0.5rem;
        }

        .found {
            width: 93%;
            height: 3rem;
            padding: 1rem 0.8rem;
            background-color: rgb(242, 242, 242, 0.5);
        }
        .founds {
            width: 100%;

            padding: 0.5rem 0rem 0.3rem 0rem;
            background-color: rgb(242, 242, 242, 0.5);
        }
        .found_all {
            width: 100%;
            height: 3rem;
            border-radius: 1.5rem;
            background-color: #fff;
        }

        .found_img {
            width: 4.5%;
            margin-top: 0.1rem;
            padding: 0.8rem 0.5rem 0.8rem 0.8rem;
            height: 1.2rem;
            float: left;
        }

        .found_all input {
            border: none;
            outline: none;
            list-style: none;
            height: 3rem;
            line-height: 3rem;
            width: 63%
        }

        .found_img img {
            width: 100%;
            height: 100%;
        }

        .found_r {
            float: right;
            width: 22%;
            height: 2.9rem;
            line-height: 2.9rem;
            text-align: center;
            color: #fff;
            background-color: #40cccc;
            border-top-right-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
        }

        .like {
            width: 91%;
            padding: 0.5rem 1rem;
        }

        .like_top {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
        }

        .like_top h4 {
            float: left;
        }

        .top_t {
            width: 31%;
            height: 2rem;
            float: right;
        }

        .top_t a {
            text-decoration: none;
            color: #ccc;
        }

        .top_t a img {
            float: right;
            width: 13%;
            height: 13%;
            margin-top: 0.5rem;
        }

        .like_pic {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .pic_one {
            width: 32%;
            height: 6rem;
            margin-top: 1.2rem;
            position: relative;
            border-radius: 30%;
        }

        .pic_img img {
            width: 100%;
            height: 100%;
        }

        .pic_text {
            width: 91%;
            height: 2rem;
            line-height: 2rem;
            padding-left: 1rem;
            border-radius: 0 0 0.5rem 0.5rem;
            background: rgb(0, 0, 0, 0.3);
            position: absolute;
            z-index: 999;
            bottom: -0.7rem;
            color: #fff;
            font-size: 12px;
            overflow:hidden;
             text-overflow:ellipsis;
             white-space:nowrap
        }
        .like_buttom{
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          margin-top: 1rem;
        }
        .buttom_left{
          width:30%;
          padding-left: 1.5rem;
          float: left;
        }
        .buttom_right{
          width:30%;
          padding-left: 1.5rem;
          float: right;
          /*text-align: right;*/
        }
        .buttom_right a{
          float: left;
          color: #40cccc;
          font-size: 1rem;
            line-height: 2rem;
            margin-top: 0.2rem;
        }
        .buttom_left a{
          float: left;
          color: #40cccc;
          font-size: 1rem;
            line-height: 2rem;
            margin-top: 0.2rem;
        }
        .b_img{
          width: 14%;
          height: 14%;
          margin-top: 0.3rem;
          float: left;
          margin-right: 0.2rem;
        }
        .b_img img{
          width: 100%;
          height: 100%;
        }
        .all{
          width: 100%;
          height: 3rem;
          line-height: 3rem;
          padding: 0rem 0rem 0.3rem 0rem;
          background-color: rgb(242, 242, 242, 0.5);
        }
        .all ul{
          background-color: #fff;
          height: 3rem;
          width: 93%;
          padding: 0rem 0.8rem;
          display: flex;
          justify-content: space-between;
        }
        .all ul li{
          float: left;
          width: 16%;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
        }
        .all ul li a{
          list-style: none;
          text-decoration: none;
          color: black;
          font-weight: bold;
        }
        .all ul li a:hover{
          color: #40cccc;
              border-bottom: 0.2rem solid #40cccc;
        }
        .all ul li a:active{
          color: black;
          border: none;
        }
        #lia{
          color: #40cccc;
            border-bottom: 0.2rem solid #40cccc;
        }
        .footer{
          width: 100%;
          /*padding: 0rem 0rem 0.3rem 0rem;*/
          background-color: rgb(242, 242, 242, 0.5);
        }
        .footer_one{
          width: 93%;
          height: 8rem;
          padding: 0.5rem 0.8rem;
          background-color: #fff;
          margin-bottom: 0.3rem;
        }
        .footer_l{
          width: 60%;
          height: 8rem;
          float: left;
        }
        .footer_l p{
          height: 2rem;
          line-height: 2rem;
          overflow:hidden;
           text-overflow:ellipsis;
           white-space:nowrap
        }
        .footer_o{
          height: 2rem;
          line-height: 2rem;
          overflow:hidden;
           text-overflow:ellipsis;
           white-space:nowrap
        }
        .fimg{
          float: left;
          margin-top: 0.2rem;
          width: 8.5%;
          height: 58%;
        }
        .fimg img{
          width: 100%;
          height: 100%;
        }
        .pp{
          color: #ccc;
          font-size: 1rem;
          font-weight: bold;
          overflow:hidden;
           text-overflow:ellipsis;
           white-space:nowrap
        }
        .footer_r{
          width:30%;
          height: 6.8rem;
          float: right;
        }
        .footer_r img{
          width: 100%;
          height: 100%;
        }
    </style>
</head>

<body>

    <!-- 轮播 -->
  <div class="" id="day">
    <div class="banner" id="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper" style="height: 12rem;" id="banner_list">

            </div>
        </div>
    </div>
    <!-- 搜索 -->
    <div class="found">
        <div class="found_all">
            <div class="found_img">
                <img src="../image/u26.png" alt="">
            </div>
            <input type="text" name="" placeholder="请输入您想找的" id="search_value">
            <a href="#" class="found_r" onclick="searchs()">
        搜索
      </a>
        </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="like">
        <div class="like_top">
            <h4>猜你喜欢</h4>
            <div class="top_t">
                <a href="#" onclick="his_cur()">
                    <span>我最近看过的</span>
                    <img src="../image/a32.png" alt="">
                </a>
            </div>
        </div>
        <div class="like_pic" id="guesslike">
            <!-- <div class="pic_one">
                <div class="pic_img">
                    <img src="../image/u33.png" alt="">
                </div>
                <div class="pic_text">
                    经典英文儿歌
                </div>
            </div> -->

        </div>
        <div class="like_buttom">
          <div class="buttom_left" onclick="set_frame(1)">
            <div class="b_img">
              <img src="../image/u45.png" alt="">
            </div>
            <a href="#">查看全部</a>
          </div>
          <div class="buttom_right" onclick="guesslike()">
            <div class="b_img">
              <img src="../image/u47.png" alt="">
            </div>
            <a >换一批</a>
          </div>
        </div>
    </div>
    <!--  -->
    <div class="founds">
      <!-- <div class="like_top" style="background-color:#fff;height:3rem;width:93%;padding:0rem 0.8rem;line-height:3rem;
      ">
          <h4>最近需要注意的是</h4>
          <div class="top_t">
              <a href="#" style="">
                  <span>我最近看过的</span>
                  <img src="../image/a11.png" alt="" style="margin-top:1rem;">
              </a>
          </div>
      </div> -->
    </div>
    <!-- 全部 -->
    <!-- <div class="all">
      <ul>
        <li ><a href="#" id="lia">全部</a></li>
        <li><a href="#">刚开始</a></li>
        <li><a href="#">进行中</a></li>
        <li><a href="#">快结束</a></li>
      </ul>
    </div> -->
    <!-- 最后 -->
  <div class="footer" id="cur_list">
<!--
    <div class="footer_one">
      <div class="footer_l">
        <p style="padding-bottom: 0.5rem;font-size1.2rem;">宝宝学英语需要注意哪些问题</p>
        <p class="pp">学英语关键词</p>
        <div class="footer_o">
          <div class="fimg">
            <img src="../image/u62.png" alt="">
          </div>
          <span class="pp">3-5岁阶段</span>
        </div>
      </div>
      <div class="footer_r">
        <img src="../image/u64.png" alt="">
      </div>
    </div> -->

  </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript">
var page = 1;
var pagesize = 10;
var userinfo=$api.getStorage('userinfo')
apiready = function() {
  get_banenrlist()//获取banner列表
  guesslike()//猜你喜欢（无算法）
  get_cur_list();//获取列表课程（无算法）
  api.addEventListener({
       　　name:'scrolltobottom',
           extra:{threshold:0}
       }, function(ret, err){
　　　　　　get_cur_list()
      });
  api.addEventListener({
      name:'user_login',
      extra:{
          threshold:0
      }
  }, function(ret, err){
          userinfo=$api.getStorage('userinfo');
        //	get_user()//获取用户数据

  });

  api.addEventListener({
      name:'user_register',
      extra:{
          threshold:0
      }
  }, function(ret, err){
          userinfo=$api.getStorage('userinfo');
          //get_user()//获取用户数据

  });

  api.addEventListener({
      name:'user_out',
      extra:{
          threshold:0
      }
  }, function(ret, err){
          userinfo=$api.getStorage('userinfo');
        //	get_user()//获取用户数据

  });
};
function searchs() {
  var search_value = $('#search_value').val()
  api.openWin({
      name: 'search',
      url: './search.html',
      pageParam: {
                  search_value: search_value
              }
  });
}
function opens(id) {
  api.openWin({
      name: 'curlist',
      url: './curlist.html',
      pageParam: {
                  id: id
              }
  });
}
function set_frame(keys) {
  api.setFrameGroupIndex({
      name: 'index_form',
      index: keys
  });
}
function his_cur() {
  if(!userinfo){
    login_at()
    return false
  }

  api.openWin({
      name: 'his_cur',
      url: './his_cur.html',

  });
}
function get_cur_list() {
  api.showProgress({
      style: 'default',
      animationType: 'fade',
      title: '努力加载中...',
      text: '先喝杯茶...',
      modal: false
  });

  var html =''
  var obj = $api.byId('cur_list');

  api.ajax({
      url: SITE_URL+'cur_api/cur/get_list',
      method: 'post',
      data: {
          values: {
              page: page,
              pagesize:pagesize
          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          if(ret.data.length){
            for (var i = 0; i < ret.data.length; i++) {
              var dat = ret.data[i]
              html +='<div class="footer_one" onclick="opens('+dat.id+')">'
              html +='<div class="footer_l">'
              html +='<p style="padding-bottom: 0.5rem;font-size:1.2rem;">'+dat.cur_name+'</p>'
              html +='<p class="pp">'+dat.cur_title+'</p>'
              html +='<div class="footer_o">'
              html +='<div class="fimg">'
              html +='<img src="../image/u62.png" alt="">'
              html +='</div>'
              html +='<span class="pp">'+dat.stage_name+'</span>'
              html +='</div>'
              html +='</div>'
              html +='<div class="footer_r">'
              html +='<img src="'+dat.img_url+'" alt="">'
              html +='</div>'
              html +='</div>'
            }
            $api.append(obj, html);
            page +=1
          }
        }else{
          msgcode('暂无更多')
        }
        api.hideProgress();

          //alert( JSON.stringify( ret ) );
      } else {
        api.hideProgress();
          //alert( JSON.stringify( err ) );
      }
  });

}



function guesslike(){
  var html =''
  var obj = $api.byId('guesslike');
  api.ajax({
      url: SITE_URL+'cur_api/guesslike/get_list',
      method: 'post',

  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          if(ret.data.length){
            for (var i = 0; i < ret.data.length; i++) {
              var dat = ret.data[i]
              html +='<div class="pic_one" onclick="opens('+dat.id+')">'
              html +='<div class="pic_img"  style="height:6.7rem">'
              html +='<img src="'+dat.img_url+'" alt="" style="border-radius:0.5rem">'
              html +='</div>'
              html +='<div class="pic_text">'
              html +=dat.cur_name
              html +='</div>'
              html +='</div>'
            }
            $api.html(obj, html);

          }
        }else{

        }

        //  alert( JSON.stringify( ret ) );
      } else {
        msgcode('请检查网络连接')
          //alert( JSON.stringify( err ) );
      }
  });

}

function get_banenrlist() {
  var html =''
  var obj = $api.byId('banner_list');

  api.ajax({
      url: SITE_URL+'setting_api/banner/get_list',
      method: 'post',
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          if(ret.data.length){
            for (var i = 0; i < ret.data.length; i++) {
              var dat = ret.data[i]
              html +='<div class="swiper-slide"><img src="'+dat.img_url+'" width="100%" height="100%"></div>'
            }
            $api.html(obj, html);
            var mySwiper = new Swiper ('.swiper-container', {
              autoplay:true,
              loop : true,
            })
            $api.addEvt($api.dom('.banner'), 'touchstart', function() {
                api.setFrameGroupAttr({
                    name: 'index_form',
                    scrollEnabled: false
                });
            });
            $api.addEvt($api.dom('.banner'), 'touchend', function() {
                api.setFrameGroupAttr({
                    name: 'index_form',
                    scrollEnabled: true
                });
            });
            // console.log(html)
          }
        }else{
          document.getElementById('day').style.display='none'
        }
          // alert( JSON.stringify( ret ) );
      } else {
        msgcode('请检查网络连接')
        //  alert( JSON.stringify( err ) );
      }
  });

}




 </script>



</html>
